<template>
  <div class="homePage">
    <div class="headerImgCon">
      <img :src="indexImg1" alt="" />
    </div>
    <div
      class="swipeCon"
      :style="{ backgroundImage: 'url(' + indexImg6 + ')' }"
    >
      <img class="swipeTabImg" :src="swipeTabImg" alt="" />
      <div class="vanSwipeCon">
        <van-swipe :autoplay="5000">
          <van-swipe-item v-for="(item, index) in swipeImg" :key="index">
            <img :src="item" class="swipeImg" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="headerImgCon">
      <img :src="indexImg2" alt="" />
    </div>
    <div
      class="headerImgCon qrCodeBgCon"
      :style="{ backgroundImage: 'url(' + indexImg3 + ')' }"
    >
      <div class="shopsCodeCon">
        <img :src="codeBase64Data" alt="" />
      </div>
    </div>
    <div
      class="headerImgCon wheelPageCon"
      :style="{ backgroundImage: 'url(' + indexImg4 + ')' }"
    >
      <div class="recordContent" @click="openRecordModal">抽奖记录</div>
      <div class="wheelCon">
        <wheel-component />
      </div>
    </div>
    <div
      class="headerImgCon agentMsgCon"
      :style="{ backgroundImage: 'url(' + indexImg5 + ')' }"
    >
      <div class="agentAddressCon">专卖店名称：{{ shopsMsg.name }}</div>
      <div class="agentPhoneCon">
        专卖店联系电话：
        <a :href="'tel:' + shopsMsg.agentPhone">{{ shopsMsg.agentPhone }}</a>
      </div>
      <div class="agentAddressCon">专卖店地址：{{ shopsMsg.address }}</div>
    </div>

    <div>
      <div ref="codeDom" style="display: none" class="codeContainer"></div>
    </div>
    <draw-record-modal
      :visible="recordModalVisible"
      @close-modal="closeRecordModal"
    />
  </div>
</template>

<script>
import { Dialog, Toast, Swipe, SwipeItem } from "vant";
import { mapMutations, mapActions } from "vuex";
import WheelComponent from "./wheelComponent";
import DrawRecordModal from "@/components/drawRecordModal";
import indexImg1 from "@/assets/切图/a7首页1.jpg";
import indexImg2 from "@/assets/切图/a7首页2.jpg";
import indexImg3 from "@/assets/切图/a7首页3.jpg";
import indexImg4 from "@/assets/切图/a7首页4.jpg";
import indexImg5 from "@/assets/切图/a7首页5.jpg";
import indexImg6 from "@/assets/切图/a7轮播背景.jpg";
import swipeTabImg from "@/assets/切图/年终12月线上H52_03.png";
import swipeImg1 from "@/assets/切图/a7轮播1.png";
import swipeImg2 from "@/assets/切图/a7轮播2.png";
import swipeImg3 from "@/assets/切图/a7轮播3.png";
import swipeImg4 from "@/assets/切图/a7轮播4.png";
import swipeImg5 from "@/assets/切图/a7轮播5.png";
const CodeMsg = {
  codeWidth: 200,
};
export default {
  components: {
    WheelComponent,
    DrawRecordModal,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      codeBase64Data: "",
      indexImg1,
      indexImg2,
      indexImg3,
      indexImg4,
      indexImg5,
      indexImg6,
      swipeTabImg,
      swipeImg: [swipeImg1, swipeImg2, swipeImg3, swipeImg4, swipeImg5],
      recordModalVisible: false,
    };
  },
  computed: {
    shopsMsg() {
      return this.$store.state.activity.shopsMsg;
    },
  },
  watch: {
    shopsMsg: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.id) {
          this.$nextTick(() => {
            this.createShopsMsg(val);
          });
        }
      },
    },
  },
  mounted() {},
  methods: {
    createShopsMsg(msg) {
      let qrcode = new QRCode(this.$refs[`codeDom`], {
        text: msg.qrcodeUrl,
        width: CodeMsg.codeWidth,
        height: CodeMsg.codeWidth,
      });
      this.$nextTick(() => {
        let codeDom = this.$refs[`codeDom`].getElementsByTagName("img")[0];
        let codeDomLoaded = function () {
          return new Promise((resolve, reject) => {
            // if (codeDom.complete) {
            //   resolve();
            // }
            codeDom.onload = () => {
              resolve();
            };
            codeDom.onError = () => {
              reject();
            };
          });
        };
        codeDomLoaded().then(() => {
          let url = codeDom.getAttribute("src");
          this.codeBase64Data = url;
        });
      });
    },
    closeRecordModal() {
      this.recordModalVisible = false;
    },
    openRecordModal() {
      this.recordModalVisible = true;
    },
  },
};
</script>

<style lang="scss">
$textColor: #fcd2bc;
.homePage {
  .headerImgCon {
    img {
      width: 100%;
      display: block;
    }
  }
  .swipeCon {
    position: relative;
    height: 781px;
    background-size: 100% 100%;
    .swipeTabImg {
      position: absolute;
      width: 622px;
      height: 119px;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    .vanSwipeCon {
      position: absolute;
      width: 993px;
      height: 673px;
      left: 43px;
      top: 40px;
    }
    .swipeImg {
      display: block;
      width: 993px;
      height: 673px;
    }
  }
  .qrCodeBgCon {
    position: relative;
    height: 491px;
    background-size: 100% 100%;
  }
  .shopsCodeCon {
    width: 167px;
    height: 167px;
    position: absolute;
    left: 770px;
    top: 292px;
    img {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
  .agentMsgCon {
    position: relative;
    background-size: 100% 100%;
    height: 435px;
    padding: 186px 60px 0 100px;
    font-size: 40px;
    font-family: SiYuanHeiTi;
    .agentPhoneCon {
      color: $textColor;
      a {
        color: $textColor;
      }
      padding-bottom: 12px;
    }
    .agentAddressCon {
      color: $textColor;
      padding-bottom: 12px;
    }
  }
  .wheelPageCon {
    background-size: 100% 100%;
    height: 736px;
    position: relative;
    .wheelCon {
      position: absolute;
      top: 265px;
      left: 541px;
      width: 423px;
      height: 423px;
    }
    .recordContent {
      position: absolute;
      right: 70px;
      top: 120px;
      font-size: 30px;
      color: white;
      text-decoration: underline;
    }
  }
}
</style>